<template>
  <div>
    <el-form 
            ref="ruleFormRef"
            :model="ruleForm"
            label-width="250px"
            :rules="rules"
            class="demo-ruleForm"
            status-icon
            disabled>
            <el-form-item label="用户名" prop="user_name" :label-width="formLabelWidth"  class="item">
              <el-input v-model.trim="userInfo.user_name">
                <template #prepend>
                  <el-icon><Avatar /></el-icon>
                </template>
              </el-input>
            </el-form-item>
        <el-form-item label="年龄" prop="user_age" :label-width="formLabelWidth" class="item">
          <el-input v-model="userInfo.user_age"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="user_loginname" :label-width="formLabelWidth" class="item">
          <el-input v-model.number="userInfo.user_loginname" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="家庭住址"
          prop="user_address"
          :label-width="formLabelWidth"
          v-model="userInfo.user_address"
          class="item"
        >
        <el-input v-model.trim="userInfo.user_address"></el-input>
        </el-form-item>
        <el-form-item
          label="联系方式"
          prop="user_phone"
          :label-width="formLabelWidth"
          class="item"
        >
          <el-input v-model="userInfo.user_phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="user_sex" :label-width="formLabelWidth" class="item">
          <el-radio-group v-model="userInfo.user_sex" class="ml-4">
            <el-radio label="男" size="large" class="item2">男</el-radio>
            <el-radio label="女" size="large" class="item2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色" prop="user_roleid" class="item" :label-width="formLabelWidth">
              <el-radio-group v-model="userInfo.user_roleid" class="ml-4">
                <el-radio label="1" size="large" class="item2">管理员</el-radio>
                <el-radio label="2" size="large" class="item2">学生</el-radio>
              </el-radio-group>
        </el-form-item>
         
      </el-form> 
  </div>
</template>

<script setup>
import {onMounted,reactive} from 'vue';
import {getToken} from '../../utils/setToken'
import {getPersonInfo} from '../../api/api'
const formLabelWidth = '220px'
const userInfo = reactive({
  user_name: "",
  user_sex: "",
  user_age: "",
  user_address: [],
  user_phone: "",
  user_roleid:"",
  user_loginname:''
});
userInfo.user_name=getToken('name')
const getInfo=async()=>{
    const res=await getPersonInfo({name:userInfo.user_name})
    if(res.data.code==0){
        console.log('个人详细信息',res.data.data)
        userInfo.user_name=res.data.data[0].user_name
        userInfo.user_age=res.data.data[0].user_age
        userInfo.user_sex=res.data.data[0].user_sex
        userInfo.user_phone=res.data.data[0].user_phone
        userInfo.user_address=res.data.data[0].user_address
        userInfo.user_roleid=res.data.data[0].user_roleid
        userInfo.user_loginname=res.data.data[0].user_loginname

    }

}
onMounted(()=>{
    getInfo()
})
</script>

<style scoped>
.el-form{
width:600px;
margin:auto;
margin-left:300px;
}
</style>